import React, {Component} from 'react';
import {View,Text,TouchableOpacity,FlatList,StyleSheet,Alert} from 'react-native';
import Ionicons from "react-native-vector-icons/Ionicons";
import CheckBox from 'react-native-check-box';
import Toast from "react-native-easy-toast";

import NavigationBar from "../common/NavigationBar";

const THEME_COLOR = '#678';

class CustomLanguage extends Component {
  constructor(props){
    super(props);
    this.state = {
      languages: [
        {name:'C++',isChecked:true},
        {name:'CSS',isChecked:true},
        {name:'HTML',isChecked:false},
        {name:'Java',isChecked:true},
        {name:'JavaScript',isChecked:false},
        {name:'Unknown languages',isChecked:true},
        {name:'TypeScript',isChecked:false},
        {name:'ActionScript',isChecked:false},
        {name:'Zeek',isChecked:true},
        {name:'C',isChecked:false},
        {name:'C#',isChecked:false},
        {name:'AutoHotkey',isChecked:false},
        {name:'Ballerina',isChecked:true},
        {name:'Alloy',isChecked:false},
      ],
    }
  }
  render() {
    let {languages} = this.state;
    let navigation = <NavigationBar
      title='自定义语言'
      style={{backgroundColor:THEME_COLOR}}
      statusBar={{hidden:true}}
      leftButton={this.leftButton()}
      rightButton={this.rightButton()}
    />;
    return (
      <View>
        {/* 顶部导航栏 */}
        {navigation}

        <FlatList
          data={languages}
          renderItem={({item,index})=>this.renderItem(item,index)}
          keyExtractor={({name},index) => name+index}
          numColumns={2}
          ItemSeparatorComponent={()=><View style={{borderBottomWidth:1,borderColor:'#ccc'}}/>}
        />
        <Toast ref={toast => this.toast = toast} position={'center'}/>
      </View>
    );
  }

  // 每个item标签
  renderItem = (item,index) => {
    return <TouchableOpacity style={styles.renderItemBox}>
      <Text style={{flex:1}}>{item.name}</Text>
      <CheckBox
        style={{padding: 10}}
        onClick={()=>{this.checkBox(item,index)}}
        isChecked={item.isChecked}
        checkBoxColor={'red'}
      />
    </TouchableOpacity>
  };

  // checkBox点击事件
  checkBox = (item,index) => {
    let {languages} = this.state;
    languages[index].isChecked = !item.isChecked;
    this.setState({
      languages
    })
  };

  // 顶部导航栏左侧按钮
  leftButton = () => {
    let {navigation} = this.props;
    return <TouchableOpacity onPress={()=>{navigation.goBack()}}>
      <Ionicons name={'arrow-back'} size={22} color={'#fff'} style={{marginLeft: 10}}/>
    </TouchableOpacity>
  };

  // 顶部导航栏右侧按钮
  rightButton = () => {
    return <TouchableOpacity style={{marginRight: 10}} onPress={this.save}>
      <Text style={{color:'#fff',fontSize: 16}}>保存</Text>
    </TouchableOpacity>
  };

  // 是否保存
  save = () => {
    Alert.alert(
      "提示",
      "要保存修改吗？",
      [
        {
          text: "是",
          onPress: () => {
            this.toast.show('已保存');
          }
        },
        {
          text: "否",
          onPress: () => {
            this.toast.show('已取消保存')
          }
        }
      ],
    );
  }
}

const styles = StyleSheet.create({
  renderItemBox:{
    flexDirection:'row',
    flex:1,
    height:60,
    justifyContent:'space-between',
    alignItems:'center',
    padding:10,
  }
});

export default CustomLanguage;